{extend name='public/base' /}

{block name='content'}
<div class="layui-card">
    <div class="layui-card-body">
        <!--        <table class="layui-hide" id="table" lay-filter="test"></table>-->
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
</div>


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添 加</button>
        <button class="layui-btn layui-btn-sm" lay-event="allDel">删 除</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    {{#  if(d.type == 1){ }}
    <a class="layui-btn layui-btn-checked layui-btn-xs" lay-event="add">
        <i class="layui-icon"></i>添加
    </a>
    {{#  } }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
        <i class="layui-icon"></i>编辑
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">
        <i class="layui-icon"></i>删除
    </a>
</script>

<form class="layui-form layui-form-pane" id="form" action="" style="display: none;width: 80%;margin-top: 20px"
      lay-filter="example">
    <div class="layui-form-item" id="select_pid">
        <label class="layui-form-label">父级菜单</label>
        <div class="layui-input-block">
            <select id="pid" name="pid" lay-filter="pid" disabled></select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" autocomplete="off" class="layui-input name"
                   lay-verify="required" placeholder="请输入菜单名称 如：主页">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单标识</label>
        <div class="layui-input-block">
            <input type="text" name="name_en" autocomplete="off" class="layui-input name_en"
                   lay-verify="required" placeholder="请输入标签名称 如：home">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="number" name="sort" lay-verify="sort" class="layui-input sort" value="1" autocomplete="off">
        </div>
        <div class="layui-form-mid layui-word-aux">0~999 数字越小越靠前</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
            <input type="radio" name="type" lay-filter="type" value="1" title="菜单">
            <input type="radio" name="type" lay-filter="type" value="0" title="按钮">
        </div>
    </div>

    <div class="layui-form-item" id="icon" style="display: none">
        <label class="layui-form-label">图标</label>
        <div class="layui-input-block" id="icon-input">
            <input type="text" name="icon" autocomplete="off" class="layui-input select_icon"
                   lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item" id="url" style="display: none">
        <label class="layui-form-label">跳转链接</label>
        <div class="layui-input-block">
            <input type="text" name="url" autocomplete="off" class="layui-input url"
                   lay-verify="required" placeholder="请输入跳转链接 如：/index">
        </div>
    </div>
</form>
{/block}

{block name='js'}
<script type="text/javascript">
    layui.config({
        base: '/res/', //静态资源所在路径
        version: '2.0.123'
    }).extend({
        iconSelected: 'layui/iconSelected',
    }).use(['table', 'form', 'treeTable', 'iconSelected'], function () {
        let $ = layui.$,
            form = layui.form,
            treeTable = layui.treeTable,
            iconSelected = layui.iconSelected,
            // 渲染表格
            tableData = treeTable.render({
                elem: '#test',
                url: '/manage/system/menu/list',
                method: 'post',
                toolbar: '#toolbarDemo',
                // tree: {
                //     customName: {
                //         id: 'id',//父ID
                //         pidName: 'pid',//子ID
                //         // name: 'name',// 是否默认展开的字段名
                //     }
                // },
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'name', title: '菜单名称', minWidth: 200,  fixed: 'left'},
                    {field: 'nameEn', title: '菜单标识', width: 200},
                    {field: 'sort', title: '排序', width: 60},
                    {field: 'url', title: '跳转路径', minWidth: 100},
                    {field: 'icons', title: '菜单图标', width: 200},
                    {field: 'createTime', title: '创建时间', width: 170},
                    {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 180}
                ]],
            });

        //工具栏事件
        treeTable.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                case 'add':  //添加
                    addData();
                    break;
                case 'allDel':  //删除
                    let checkStatus = table.checkStatus(obj.config.id),
                        data = checkStatus.data;
                    deleteData(data);
                    break;
            }
        });
        //监听工具条
        treeTable.on('tool(test)', function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case 'add':
                    addData(data);
                    break;
                case 'edit':
                    editData(data);
                    break;
                case 'delete':
                    deleteData([data]);
                    break;
            }
        });

        //form验证
        form.verify({
            sort: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!/^\+?[1-9]{1}[0-9]{0,2}\d{0,0}$/.test(value)) {
                    return '排序值在1~999之间';
                }
            }
        });

        //radio监听
        form.on('radio(type)', function (data) {
            if (data.value == 1) {
                $('#icon').show();
                $('#url').hide();
                //初始化图标选择
                $('#icon-input').find('.layui-ext-icon-selected-input').remove();
                iconSelected.render(".select_icon", {});
            } else {
                $('#icon').hide();
                $('#url').show();
            }
        });

        //添加
        function addData(data) {
            $('#icon').hide()
            $('#url').hide();
            $("#form")[0].reset();
            $("#pid").html('');
            $('#select_pid').show();
            if (!data) {
                $('#pid').append('<option value="0">顶级菜单</option>');
            } else {
                $('#pid').append('<option value="' + data.id + '">' + data.name + '</option>');
                $('input[name="pid"]').val(data.id);
            }
            layer.open({
                id: 'addMenu',
                type: 1,
                title: '添加菜单',
                content: $('#form'),
                area: ['45%', '600px'],
                btn: ['确定', '取消'],
                btn1: function (index, layero) {
                    if (!form.validate('.name') || !form.validate('.name_en') || !form.validate('.sort')) {
                        return false;
                    }
                    let data = form.val('example');
                    if (!data.type) {
                        layer.msg('请选择菜单类型', {icon: 5});
                        return false;
                    } else {
                        if (data.type === '2' && !form.validate('.url')) {
                            return false;
                        }
                    }
                    $.ajax({
                        type: 'post',
                        url: "/manage/system/menu/add",
                        data: data,
                        success: function (res) {
                            if (res.code === 0) {
                                layer.close(index);
                                layer.msg('添加成功');
                                tableData.reload();
                            } else {
                                layer.msg(res.message);
                                return false;
                            }
                        }
                    });
                },
                end: function () {
                    $('#form').hide();
                },
            });
        }

        function editData(data) {
            $("#form")[0].reset();
            $('#select_pid').hide();
            $('#icon').hide()
            $('#url').hide();
            form.val('example', {
                "name": data.name, // "name": "value"
                "name_en": data.nameEn,
                "icon": data.icons,
                "sort": data.sort,
                "type": data.type.toString(),
                "url": data.url,
            });
            if (data.type === 1) {
                $('#icon-input').find('.layui-ext-icon-selected-input').remove();
                iconSelected.render(".select_icon", {});
                $('#icon').show();
            } else {
                $('#url').show();
            }
            iconSelected.render(".select-icon", {});
            layer.open({
                id: 'addMenu',
                type: 1,
                title: '修改菜单',
                content: $('#form'),
                area: ['45%', '600px'],
                btn: ['确定', '取消'],
                btn1: function (index, layero) {
                    if (!form.validate('.name') || !form.validate('.name_en') || !form.validate('.sort')) {
                        return false;
                    }
                    let res = form.val('example');
                    res['pid'] = data.pid;
                    res['id'] = data.id;
                    $.ajax({
                        type: 'post',
                        url: "/manage/system/menu/update",
                        data: res,
                        success: function (res) {
                            if (res.code === 0) {
                                layer.close(index);
                                layer.msg('修改成功');
                                tableData.reload();
                            } else {
                                layer.msg(res.message);
                                return false;
                            }
                        }
                    });
                },
                end: function () {
                    $('#form').hide();
                },
            });
        }

        function deleteData(data) {
            layer.confirm('确定删除吗？', function (index) {
                //执行 Ajax 后重载
                $.ajax({
                    type: 'post',
                    data: {data: data},
                    url: '/manage/system/menu/delete',
                    success: function (res) {
                        if (res.code === 0) {
                            layer.msg('删除成功')
                            tableData.reload();
                        } else {
                            layer.msg(res.message);
                        }
                    }
                });
            });
        }
    });
</script>
{/block}